<!--
wangjia: 设计多图上传的新增、修改、删除逻辑
添加图片：通过el-upload组件实现，上传时维护了一个fileList用于提交到图片资源提交api
        修改图片：先读取所有绑定的案例图片进行展示，读取api就是案例详情，得到绑定的图片列表。
        展示方式：card组
        在展示时，通过删除card进行修改，并弹出对话框引导用户确认删除此图片。对话框的数据对象独立构造
        修改删除后新增：还是通过upload组件进行新增，逻辑和单独新增一样。新增时fileList为新增的fileList

        若修改时新增，只是多了展示环节,展示的fileList是独立的，新增的fileList也是独立的。
        若修改时删除并新增，删除的fileList和新增的fileList也是独立的。
20220606
二级类型添加
-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="供应商联系人" prop="supplierLinkName">
        <el-input
          v-model="queryParams.supplierLinkName"
          placeholder="请输入供应商联系人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目名称" prop="projectTitle">
        <el-input
          v-model="queryParams.projectTitle"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目类型" prop="projectTag">
        <el-input
          v-model="queryParams.projectTag"
          placeholder="请输入项目类型"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否推荐" prop="isRecommend">
        <el-input
          v-model="queryParams.isRecommend"
          placeholder="请输入是否推荐"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['supplier:case:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['supplier:case:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['supplier:case:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['supplier:case:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="caseList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="" align="center" prop="id" />
      <!-- <el-table-column label="供应商用户id" align="center" prop="supplierUserId" /> -->
      <el-table-column label="供应商联系人" align="center" prop="supplierLinkName" />
      <el-table-column label="供应商联系电话" align="center" prop="supplierLinkTel" />
      <el-table-column label="项目名称" align="center" prop="projectTitle" />
      <el-table-column label="项目类型" align="center" prop="projectTag" :formatter = "tagFormat" />
       
      <el-table-column label="合作方式" align="center" prop="projectCooperate">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.supplier_case_cooper_mode" :value="scope.row.projectCooperate ? scope.row.projectCooperate.split(',') : []"/>
        </template>
      </el-table-column>
      <el-table-column label="项目价格" align="center" prop="projectPrice" />
      <el-table-column label="项目描述" align="center" prop="projectDescription" :show-overflow-tooltip="true" />
      <el-table-column label="是否推荐" align="center" prop="isRecommend" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.supplier_case_is_recommend" :value="scope.row.isRecommend"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="authStatus" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.commercial_case_status" :value="scope.row.authStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center" prop="projectPics" >
        <template slot-scope="scope">
        <el-popover placement="top-start" trigger="click">
          <a :href="scope.row.projectPics" target="_blank" title="查看图片">
            <img :src="scope.row.projectPics" style="width: 500px;height: 400px">
          </a>
          <img slot="reference" :src="scope.row.projectPics" style="width: 50px;height: 50px; cursor:pointer">
        </el-popover>
       </template>
      </el-table-column>
      <el-table-column label="视频" align="center" prop="projectVideo" />
      <!-- <el-table-column label="购买意向者" align="center" prop="projectBuyer" /> -->
      <el-table-column label="消息" align="center" prop="projectMsg" />
      <el-table-column label="发布时间" align="center" prop="publishTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后修改时间" align="center" prop="modifyTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifyTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['supplier:case:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['supplier:case:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改供应商案例对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="供应商用户选择" prop="supplierUserId">
          <!-- <el-input v-model="form.supplierUserId" placeholder="请输入供应商用户id" /> -->
          <el-select v-model="selsupplierUserId" filterable placeholder="请选择供应商"  
          value-key="id"
          @change="changeSupplierSelect">
              <el-option
                v-for="item in supplieruserList"
                :key="item.id"
                :label="item.companyName"
                :value="item">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="供应商联系人" prop="supplierLinkName">
          <el-input v-model="form.supplierLinkName" placeholder="请输入供应商联系人"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="供应商联系电话" prop="supplierLinkTel">
          <el-input v-model="form.supplierLinkTel" placeholder="请输入供应商联系电话" :disabled="true" />
        </el-form-item>
        <el-form-item label="项目名称" prop="projectTitle">
          <el-input v-model="form.projectTitle" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目类型" prop="projectTag">
          <!-- <el-input v-model="form.projectTag" placeholder="请输入项目类型" /> -->
            <div class="block">
              <el-cascader
                 v-model = "form.projectTag"
                :options="type_options"
                :props="type_props"
                clearable>
              </el-cascader>
            </div>
        </el-form-item>
        <el-form-item label="合作方式" prop="checkBoxSel">
          <el-checkbox-group v-model="form.checkBoxSel">
            <el-checkbox
              v-for="item in sel_costom_o"
              :key="item.value"
              :label="item.value">
              {{item.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="项目价格" prop="projectPrice">
          <el-input v-model="form.projectPrice" placeholder="请输入项目价格" />
        </el-form-item>
        <el-form-item label="项目描述" prop="projectDescription">
          <el-input v-model="form.projectDescription" placeholder="请输入项目描述" />
        </el-form-item>
        <el-form-item label="宣传内容" prop="propagateContent">
          <editor v-model="form.propagateContent" :min-height="192"/>
        </el-form-item>
        <el-form-item label="是否推荐" prop="isRecommend">
           <el-select v-model="form.isRecommend" placeholder="请选择">
            <el-option
              v-for="dict in dict.type.supplier_case_is_recommend"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>

        </el-form-item>
        
        <el-form-item label="是否上架[审核用]" prop="authStatus">
          <!-- <el-input v-model="form.isRecommend" placeholder="请输入是否上架招商" /> -->
          <el-select v-model="form.authStatus" placeholder="请选择">
            <el-option
              v-for="dict in dict.type.commercial_case_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="景区图片" prop="projectPics">
          <!-- <el-input v-model="form.projectPics" type="textarea" placeholder="请输入内容" /> -->
          <el-row v-if="updateFlag">
            <el-col :span="4" v-for="(o, index) in fileCardShowList" :key="o.id" :offset="index > 0 ? 4 : 0">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="o.resourceUrl" class="image">
                <div style="padding: 14px;">
                  <span>{{o.resourceName}}</span>
                  <div class="bottom clearfix">
                    <el-button type="text" class="button" @click.native="delOnePic(index)">删除</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-upload
            class="upload-demo"
            :limit="9"
            :action="uploadFileUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="handleUploadSuccess"
            :on-change="handleChange"
            :file-list="fileList"
            :data = "updata"
            :headers="headers"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频参数1" prop="projectVideo">
          <el-input v-model="form.projectVideo" placeholder="请输入视频参数1" />
        </el-form-item>
        <el-form-item label="视频参数2" prop="projectVideo">
          <el-input v-model="form.projectVideo2" placeholder="请输入视频参数2" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCase, getCase, delCase, addCase, updateCase, delSupplierCasePic, listAllType } from "@/api/supplier/case";
import { listSupplieruser } from "@/api/supplier/supplieruser";
import { getToken } from "@/utils/auth";

import axios from 'axios'
export default {
  name: "Case",
  dicts: ['supplier_case_cooper_mode', 'commercial_case_status', 'supplier_case_is_recommend'],
  data() {
     const validatePrice = (rule,value,callback) =>{
        let reg = /^(([1-9]{1}\d*)|(0{1}))$/
        if(!value){
            callback(new Error('价格不能为空'))
         }else if(!reg.test(value)){
            callback(new Error('请输入正确格式的整数价格'))
             this.$set(this.form, "projectPrice", '');
         }else if(value.length > 10){
            callback(new Error('最多可输入10个字符'))
             this.$set(this.form, "projectPrice", '');
         }else{
          callback();
        }
      };

    return {
      type_props: {
         multiple: true ,
         value: "id",
         label: "typeName",
         children: "sub_type_list"
         },
      sel_costom_o: [
        {
          value: 1,
          label: '可投'
        }, {
          value: 2,
          label: '可售'
        }, {
          value: 3,
          label: '联营'
        }
      ],
     // checkBoxSel: [],
      type_options: [],
      hashmap_main: null,
      hashmap_sub: null,
      fileList: [], // 用于upload组件上传时的fileList
      fileCardShowList: [], // 用于修改时展示用的fileList
      updateFlag: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/uploadFile", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
       uploadObjectUrl: "", // 纯前端预览地址-upload
       uploadOnlineUrl: "", // 后端返回的上传地址-upload
       updata:{ "strPath": "pics"},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 供应商案例表格数据
      caseList: [],
      supplieruserList: [],
      supplierContacter: null,
      supplierTel: null,
      selsupplierUserId: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierLinkName: null,
        projectTitle: null,
        projectTag: null,
        projectCooperate: null,
        isRecommend: null,
        projectPriceRange: '',
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        supplierUserId: [
          { required: true, message: "供应商用户不能为空", trigger: "blur" }
        ],
        supplierLinkName: [
          { required: true, message: "供应商联系人不能为空", trigger: "blur" }
        ],
        supplierLinkTel: [
          { required: true, message: "供应商联系电话不能为空", trigger: "blur" }
        ],
        projectTitle: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        projectPrice: [
          { required: true,  trigger: 'blur', validator:validatePrice }
        ],
        isRecommend: [
          { required: true, message: "是否推荐不能为空", trigger: "blur" }
        ],
        authStatus: [
          { required: true, message: "是否上架能为空", trigger: "blur" }
        ],

        checkBoxSel: [
            { type: 'array', required: true, message: '请至少选择一个合作方式', trigger: 'change' }
          ],
          propagateContent: [
            { required: true, message: "宣传内容不能为空", trigger: "blur" }
          ],
          projectDescription: [
            { required: true, message: "项目描述不能为空", trigger: "blur" }
          ],  
        projectPics: [
          { required: true, message: "景区图片不能为空", trigger: "change" }
        ],
                            }
                          };
                        },
                        created() {
                          this.getList2();
                          this.getTypeList();
                          this.getSupplierList();
                        },
                        methods: {

                          tagFormat(row, column,value) {
                            // console.log('row', row);
                            let val = JSON.parse(value);
                            let that = this
                          // console.log(val.length, val);
                            if(val == null || !(val instanceof Array)) return '';
                            if(that.hashmap_main ==null) return '';
                            // let t =  val.map(t=> 
                            //   (that.hashmap_main[(t[0]-0)] + '-' + that.hashmap_sub[(t[1]-0)] )
                            // )
                            let t = '';
                            for(var item of val) {  // [3,13]是一个item, [3,16]是另一个item
                            var s1 = item[0] - 0;
                            var s2 = item[1] - 0;
                            //console.log(that.hashmap_main[s1]);
                            t = t + that.hashmap_main[s1] + '-' + that.hashmap_sub[s2] + ','
                            }
                            
                            return t;
                          },
                          
                          // 删除某个案例图片，删除
                          delOnePic(i){
                            console.log('del button', i)
                            console.log(this.fileCardShowList[i])
                            let that = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delSupplierCasePic(that.fileCardShowList[i])
          //删除成功后需刷新一次，先试试在fileCardShowList中进行处理，不对对话框进行刷新
          that.fileCardShowList.splice(i,1); 
          this.$message({    
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleUploadSuccess(res, file) {
     // this.imageObjectUrl = URL.createObjectURL(file.raw);
      this.$refs.form.clearValidate('projectPics')
     // this.uploadOnlineUrl = res.path;
      this.form.projectPics = res.data.url;
    },
     handleChange(file, fileList) {
        this.fileList = fileList
        console.log('a', this.fileList)
      },
    changeSupplierSelect(val) {
      console.log(val)
      this.form.supplierLinkName = val.linkName
      this.form.supplierLinkTel = val.linkTel
      this.form.supplierUserId = val.id
    },

    // 查询供应商list
     getSupplierList() {
      
      listSupplieruser(
        {
        pageNum: 1,
        pageSize: 1000
      }
      ).then(response => {
        this.supplieruserList = response.rows;
      });
    },
    getTypeList() {
      let that = this
       listAllType().then(response => {
        that.type_options = response.data;
        console.log(that.type_options);
      }).then(
        ()=>{
          that.hashmap_main = {}; 
          that.hashmap_sub = {};

      for(var i of that.type_options) {
          that.hashmap_main[i.id]=i.typeName
          for(var j of i.sub_type_list) {
            that.hashmap_sub[j.id] = j.typeName
          }
      }
       // console.log(that.hashmap_main)
       // console.log(that.hashmap_sub)
        }
      );
    },

    /** 查询供应商案例列表 */
    getList() {
      this.loading = true;
      let that = this
     
     
        axios({
            method: 'get',
            url: process.env.VUE_APP_BASE_API+'/supplier/case/list',
             headers: { 'Authorization': 'Bearer ' + getToken() },
            params: this.queryParams  ,

           //  paramsSerializer: params => {
           // return qs.stringify(params, { indices: false })
         // },  
          }).then(response => {
        that.caseList = response.data.rows;
        that.total = response.data.total;
        that.loading = false;
      });
    },

      /** 查询供应商案例列表 */
    getList2() {
      this.loading = true;
      let that = this
     
        axios({
            method: 'post',
            url: process.env.VUE_APP_BASE_API+'/supplier/case/list2',
            data: this.queryParams  ,
           //  paramsSerializer: params => {
           // return qs.stringify(params, { indices: false })
         // },  
          }).then(response => {
        that.caseList = response.data.rows;
        that.total = response.data.total;
        that.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        supplierUserId: null,
        supplierLinkName: null,
        supplierLinkTel: null,
        projectTitle: null,
        projectTag: null,
        projectCooperate: [],
        projectPrice: null,
        projectDescription: null,
        propagateContent: null,
        isRecommend: null,
        projectStatus: "0",
        projectPics: null,
        projectVideo: null,
        projectBuyer: null,
        projectMsg: null,
        publishTime: null,
        modifyTime: null,
        pics: [],
        checkBoxSel: []
      };
      this.fileList = [];
      this.selsupplierUserId = null;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
       this.updateFlag = false
      this.title = "添加供应商案例";
    },

    /** 修改按钮操作 */
    /** 这里修改的逻辑重新设计，显示的是card型的已有图片
     * 
    */
    handleUpdate(row) {
      let that = this
      let tmpList = []
      this.reset();
      this.updateFlag = true
      const id = row.id || this.ids
      getCase(id).then(response => {
        that.form = response.data;
        that.form.isRecommend = that.form.isRecommend + '';
       // this.form.supplierUserId = Number(this.form.supplierUserId);
       
       // wangjia：对select对象类型的回填需要构造一个同样的对象成员，重要！
        that.selsupplierUserId = {id: that.form.supplierUserId};
        // wangjia:构造fileList回填，从数据的pics对象数组逆向到fileList数组
        tmpList = JSON.parse(JSON.stringify(that.form.pics))
        that.fileCardShowList = tmpList
    
       let temp = []
        if(that.form.projectCooperate != null){
          temp = that.form.projectCooperate.split(",");
          that.$set(that.form, 'checkBoxSel', temp.map(i=>(i-0)))
        }else {
          that.$set(that.form, 'checkBoxSel', [])
        }
        that.form.projectTag = eval(that.form.projectTag);
        
        //that.form.checkBoxSel = temp.map(i=>(i-0))
        
        that.open = true;
        that.title = "修改供应商案例";
        
        // for(var i  of tmpList) {
        //   var s = {}
        //   s.name = i.resourceName
        //   s.urls = i.resourceUrl
        //   that.fileList.push(s)
        // }
     
      });
     
    },
    // 组织用于上传的图片对象数组用于传参
    prepareUploadPics() {
      this.form.pics = []
      let tmpObj = {};
      let upVal = [];
      for(var i of this.fileList) {
        tmpObj = {}
        tmpObj.resourceType = "1" //重要，这个是软删除标志，1为默认有效
        tmpObj.resourceName = i.name
        tmpObj.resourceUrl = i.response.data.url
        upVal.push(tmpObj)
      }
      this.form.pics = upVal
    },
    /** 提交按钮 */
    submitForm() {
      this.prepareUploadPics();
      let that = this
     
      this.$refs["form"].validate(valid => {
        if (valid) {
         // this.form.projectCooperate = this.form.projectCooperate.join(",");
         if(that.form.projectTag != null && typeof(that.form.projectTag) != 'string')
            that.form.projectTag = JSON.stringify(that.form.projectTag);
           that.form.projectCooperate = that.form.checkBoxSel.join(",");
          if (that.form.id != null) {
            updateCase(that.form).then(response => {
              that.$modal.msgSuccess("修改成功");
              that.open = false;
              that.getList();
            });
          } else {
            addCase(that.form).then(response => {
              that.$modal.msgSuccess("新增成功");
              that.open = false;
              that.getList();
             // var tmpval = this.uploadPics();
             // console.log("a", response)
             // console.log(tmpval)
              
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除供应商案例编号为"' + ids + '"的数据项？').then(function() {
        return delCase(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('supplier/case/export', {
        ...this.queryParams
      }, `case_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>